import { Avatar, Input } from "@arco-design/web-react";
import { useRef } from "react";
import { Outlet, useNavigate } from "react-router-dom";
import "./home.less";

// import {window} from '@tauri-apps/api';

// const appWindow = new window('main'); 

const Home = () => {
    const nav = useNavigate();
    const cmd = useRef<any>();
    const runCmd = () => {
        cmd.current.blur();
        nav(cmd.current.dom.value)
        //console.log(cmd.current.dom)
        //console.log(e)
    } 
    const mini = () => {
        appWindow.minimize()
    }
    return(
        <>
            <div data-tauri-drag-region>
                <div data-tauri-drag-region className="titlebar">
                    <Avatar>T</Avatar>
                    <Input onPressEnter={runCmd} ref={cmd} style={{width:350}} placeholder="请输入命令"/>
                    <Avatar>T</Avatar>
                    <div>
                        <div className="titlebar-button" id="titlebar-minimize">
                            <img
                            src="https://api.iconify.design/mdi:window-minimize.svg"
                            alt="minimize"
                            />
                        </div>
                        <div className="titlebar-button" id="titlebar-maximize">
                            <img
                            src="https://api.iconify.design/mdi:window-maximize.svg"
                            alt="maximize"
                            />
                        </div>
                        <div className="titlebar-button" id="titlebar-close">
                            <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
                        </div>
                    </div>
                </div>
                <div className="body-content">
                    <Outlet />
                </div>
            </div>
        </>
    )
}
export default Home;
